<template>
	<view class="use-box-model">
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="header-bg">
					<view class="title-box">
						<view class="">

						</view>
						<view class="title">
							授权
						</view>
						<view class="lg text-gray cuIcon-close icon-close-box" @click="close">

						</view>
					</view>


					<view class="serve-box">
						<view class="left">
							<image src="https://qiyeji.oss-cn-beijing.aliyuncs.com/pet/service/server1.png" mode=""></image>
							<text class="">
								服务项目：
							</text>
						</view>
						<view class="right">
							{{item.name}}
						</view>
					</view>

				</view>
				<view class="form-box">
					<view class="form-item">
						<view class="label">
							选择服务商
						</view>
						<view class="input-box" @click="toPage">
							<view class="name">
								已选择: {{list.length}}
							</view>
							<i class="lg text-gray cuIcon-right"></i>
						</view>
					</view>

					<view class="form-item">
						<view class="label">
							可使用次数
						</view>
						<view class="input-box">
							<input v-model="total" type="number" placeholder="请输入" />
							<view class="name">
								次
							</view>
						</view>
					</view>
					<!-- <view class="form-item">
						<view class="label">
							选择有效期
						</view>
						<view class="input-box">
							<uni-datetime-picker v-model="date" @change="handleDate" :start="startBefore()" type='daterange'>
								<view class="flex align-center" v-if='!date.length'>
									<text class='name'>请选择日期</text>
									<i class="lg text-gray cuIcon-right"></i>
								</view>
								<text v-else>{{date[0]}}至{{date[1]}}</text>
							</uni-datetime-picker>
						</view>
					</view> -->
				</view>
				<view class="bottom-btn-box">
					<view class="bottom-btn" @click="handleConfirm">
						确定
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from "@/common/util.js"
	export default {
		data() {
			return {
				modalName: "",
				params: {},
				item: {},
				list:[],
				total:0,
				date:[],
				pet_team:{},
			}
		},
		created() {
			this.pet_team = uni.getStorageSync('pet_team')
		},
		methods: {
			toPage() {
				uni.$on('active_merchant_list',(list)=>{
					this.list = list
					uni.$off('active_merchant_list')
				})
				uni.navigateTo({
					url: `/pagesPet/pages/service/saler/serve/select-mch`
				})
			},
			startBefore() {
				return util.getdate()
			},
			handleDate(e){
				console.log(this.form)
				
			},
			open(params) {
				console.log(params, 'asdfasd')
				this.reg()
				this.item = params.item
				this.params.success = params.success || null; //确认方法回调
				this.params.close = params.close || null; //取消方法回调
				this.modalName = 'bottomModal';
			},
			close() {
				this.modalName = '';
			},
			handleClose() {
				if (this.params.close) {
					this.params.close()
				}
				this.close()
			},
			handleConfirm() {
				// if(!this.date.length){
				// 	return uni.showToast({
				// 		title:'请选择有效期',
				// 		icon:'none'
				// 	})
				// }
				if(!this.total){
					return uni.showToast({
						title:'请填写正确的使用次数',
						icon:'none'
					})
				}
				if(!this.list.length){
					return uni.showToast({
						title:'请选择客户',
						icon:'none'
					})
				}
				if (this.params.success) {
					let bizList = []
					for (let i = 0; i < this.list.length; i++) {
						bizList.push({
							bizId:this.list[i].id,
							bizName:this.list[i].name,
						})
					}
					this.params.success({
						serveId:this.item.id,
						teamId:this.pet_team.teamId,
						teamName:this.pet_team.teamName,
						type:'MCH',
						// startTime:this.date[0],
						// endTime:this.date[1],
						total:this.total,
						bizs:bizList
					})
				}
				this.close()
			},
			reg(){
				this.list = []
				this.date = []
				this.total = 0
			}
		}
	}
</script>




<style>
	.use-box-model .cu-dialog {
		width: 100%;
		/* height: 874rpx; */
		background: #f8f8f8;
		/* border-radius: 40rpx 40rpx 0rpx 0rpx; */
	}
</style>


<style lang="scss" scoped>
	.serve-box {
		margin-top: 64rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 16rpx;
		border: 2rpx solid #FFFFFF;
		display: flex;
		padding: 24rpx;

		.left {
			width: 300rpx;

			image {
				margin-right: 12rpx;
				width: 26rpx;
				height: 26rpx;
			}

			font-family: PingFangSC,
			PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: var(--h1Color);
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}

		.right {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: var(--h1Color);
			line-height: 42rpx;
			text-align: left;
			font-style: normal;
		}
	}

	.header-bg {
		padding: 0 32rpx;
		height: 300rpx;
		width: 100%;
		background: url('https://qiyeji.oss-cn-beijing.aliyuncs.com/20250111/202412201337281416.png') no-repeat;
		background-size: 100% 100%;
	}

	.use-box-model {
		.cu-dialog {
			border-radius: 30rpx;
		}

		.title-box {
			padding-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: var(--h1Color);
				line-height: 42rpx;
				text-align: center;
				font-style: normal;
			}

			.icon-close-box {
				font-size: 40rpx;
				color: var(--h1Color);
			}
		}

		.bottom-btn-box {
			padding: 0 32rpx 60rpx 32rpx;

			.bottom-btn {
				width: 100%;
				height: 96rpx;
				background: var(--primaryBg);
				border-radius: 48rpx;
				margin-top: 48rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 32rpx;
				color: var(--btnColor);
				line-height: 45rpx;
				text-align: center;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}


		.form-box {
			margin-top: 24rpx;
			margin: 0 14rpx;
			padding: 0 24rpx;

			width: 719rpx;
			background: #FFFFFF;
			border-radius: 16rpx;

			.form-item {
				height: 122rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #EEEEEE;

				&:last-child {
					border-bottom: none;
				}

				.label {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color:var(--h1Color);
					line-height: 42rpx;
					text-align: left;
					font-style: normal;
				}

				.input-box {
					display: flex;
					align-items: center;

					input {
						margin-right: 20rpx;
						width: 200rpx;
						height: 80rpx;
						background: #F8F8F8;
						border-radius: 8rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: var(--h1Color);
						line-height: 42rpx;
						text-align: center;
						font-style: normal;
					}

					.name {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color:var(--h1Color);
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
		}
	}
</style>